<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"></script>
    <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script type="text/javascript" src="../js/deviceRegister.js"></script>
    <script type="text/javascript">
        var systemPlatform,screenWidth,screenHeight;
        //获取手机信息的回调接口
        function getSystemInfoCallback(resultStr){
            var jsonObject=JSON.parse(resultStr);
            systemPlatform=jsonObject['platform'];//获取手机操作系统
            screenHeight=jsonObject['screenHeight'];//获取手机屏幕高度
            screenWidth=jsonObject['screenWidth'];//获取手机屏幕高度
            console.log('获取到了手机操作系统信息为:'+systemPlatform+' 现在去注册设备');
            deviceRegister(systemPlatform);//注册设备
        }
    </script>
    <style type="text/css">
        .formItem{
            margin-top: 10%;
        }
        .formItem span,.formItem input,.formItem button{
            font-size:xx-large;
            font-weight:bold;
        }

        
    </style>
</head>
<body>
<div id="app">
    <center >
    <div v-if="bodyMsgSeen">
        <h1>请填写您的身体信息</h1>
        <div class="formItem">
             <span>性别：</span><div style='display:inline;' v-for='item in items' >
                    <input type='radio' name='sex' :checked='item.checked' v-model='sex' :value='item.value'><span>{{item.display}}</span>
                </div>
        </div>
        <div  class="formItem">
            <span>身高：</span><input type="text" v-model:value="bodyHeight" oninput = "value=value.replace(/[^\.\d]/g,'')">
        </div>
        <div  class="formItem">
            <span >体重：</span><input  type="text" v-model:value="bodyWeight" oninput = "value=value.replace(/[^\.\d]/g,'')">
        </div>
        <div  class="formItem">
            <span >年龄：</span><input type="text" v-model:value="age" oninput = "value=value.replace(/[^\.\d]/g,'')">
        </div>  
         <div  class="formItem">
            <button type="button" v-on:click="bodyMsgNextStep">下一步</button>    
        </div> 
    </div>     
    <div v-if="isToCleanHistorySeen">
        <h1 class="formItem">警告</h1>
        <h2 class="formItem">检查到该设备之前有注册行为,请问是否将该设备之前的历史运动记录清空</h2>
        <div class="formItem">
            <button  type="button" v-on:click="sureToCleanHistory" style="margin-left: 20px">清除</button>
            <button  type="button" v-on:click="notToCleanHistory" style="margin-right: 20px">不清除</button>
        </div>
    </div>     
    </center>
</div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                bodyMsgSeen:false,
                isToCleanHistorySeen:false,
                bodyHeight:0.0,
                bodyWeight:0.0,
                age:0,
                sex:0,
                items:[
                    {value:0,display:'男',checked:'checked'},
                    {value:1,display:'女'}
                ],
                hasRegister:false,
                isToCleanHistory:false//标志是否要清除之前的历史运动数据
            },
            methods:{
                bodyMsgNextStep:function(){
                    currentStep=3;//代表用户点击了下一步
                    console.log('填写了身体信息并点击了下一步,隐藏填写身体信息的表单');
                    this.bodyMsgSeen=false;
                    if(this.hasRegister){//如果设备已经在云端注册了的话
                        console.log('因为已经在自己的云端注册,所以要询问用户是否要清除云端的历史运动记录');
                        console.log('显示询问用户是否要清除历史运动记录的表单');
                        this.isToCleanHistorySeen=true;//显示询问用户是否要清除历史运动记录的表单
                    }else{//如果没有注册过
                        currentStep=4;//不用询问，所以直接跳过3，但是还没有去自己云端注册
                        console.log('设备是第一次注册');
                        this.isToCleanHistory=false;//没有注册过那肯定就不用清除云端的历史运动数据了
                        registerDeviceToMyServer();//去自己云端注册
                    }
                },
                sureToCleanHistory:function(){
                    currentStep=4;//用户选择了是否清除,但是还没有去自己云端注册
                    console.log('用户选择清除以往的记录');
                    this.isToCleanHistory=true;
                    console.log('隐藏询问用户是否要清除历史运动记录的表单');
                    this.isToCleanHistorySeen=false;//隐藏询问用户是否要清除历史运动记录的表单
                    registerDeviceToMyServer();//去自己云端注册
                },
                notToCleanHistory:function(){
                    currentStep=4;//用户选择了是否清除,但是还没有去自己云端注册
                    console.log('用户选择不清除以往的记录');
                    this.isToCleanHistory=false;
                    console.log('隐藏询问用户是否要清除历史运动记录的表单');
                    this.isToCleanHistorySeen=false;//隐藏询问用户是否要清除历史运动记录的表单
                    synchhDeviceTime();//去同步设备时间，因为要获取设备本地历史运动数据
                }                
            }
        });
        window.hilink.getSystemInfoSync ('getSystemInfoCallback');//获取手机的操作系统信息
    </script>
</body>
</html>